<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="static/css/register.css">
</head>
<body>
<div id="login_box">
    <h2>Register</h2>
    <div id="input_box">
        <input type="text" placeholder="请输入您的邮箱" id="email" name="email" required>
        <p id="emailError" class="error">&nbsp;</p>
    </div>
    <div class="input_box" style="margin-top: 12px;">
        <input type="text" placeholder="请输入您的账号" id="name" name="name" required>
        <p id="nameError" class="error">&nbsp;</p>
    </div>
    <div class="input_box" style="margin-top: 12px;">
        <input type="password" placeholder="请输入您的密码" id="pwd" name="pwd" required>
        <p id="pwdError" class="error">&nbsp;</p>
    </div>
    <button class="but" id="but" name="but">注册</button><br>
    <a href="/login" class="but1">去登录</a><br>
</div>

<script>
    var name1 = document.getElementsByName('name')[0];



    //  光标移出用户框
    name1.onblur = function () {
        const userName = name1.value
        $.ajax({
            url : "/register_ajax",
            type : "POST",
            data : {
                "uname" : userName
            },
            success :function (infor) {
                document.getElementById('nameError').innerText = infor["mag"];
                if (infor["mag"].length == 0){
                    document.getElementsByName('but')[0].disabled = false;
                }else {
                    document.getElementsByName('but')[0].disabled = true;
                }
            },

        })

    }


     document.getElementById('but').onclick = function (){
         console.log("点击了")
         console.log(document.getElementById('but').disabled+"**")
      const email = document.getElementById('email').value;
      const name = document.getElementById('name').value;
      const pwd = document.getElementById('pwd').value;

      // const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      // const namePattern = /^[a-zA-Z0-9_-]{3,16}$/;
      // const pwdPattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$/;

         // 验证邮箱格式
         if (email.trim() === '') {
             document.getElementById('emailError').textContent = '请输入有效的邮箱地址';
             document.getElementsByName('but')[0].disabled = false;
             return
         } else {
             document.getElementsByName('but')[0].disabled = true;
             document.getElementById('emailError').textContent = '';
         }

         // 验证账号格式
         if (name.trim() === '') {
             document.getElementById('nameError').textContent = '账号格式不正确';
             document.getElementsByName('but')[0].disabled = false;
             return
         } else {
             document.getElementsByName('but')[0].disabled = true;
             document.getElementById('nameError').textContent = '';

         }

         // 验证密码格式
         if (pwd.trim() === '') {
             document.getElementById('pwdError').textContent = '密码不能为空';
             document.getElementsByName('but')[0].disabled = false;
             return
         } else {
             document.getElementsByName('but')[0].disabled = true;
             document.getElementById('pwdError').textContent = '';
         }


         $.ajax({
             url: "/register",
             type:"post",
             data:{
                 "email": document.getElementById("email").value,
                 "name" : document.getElementById("name").value,
                 "pwd" : document.getElementById("pwd").value,
             },
             dataType:"json",
             success:function (data) {
                 if (data.data == "注册成功！"){
                     alert("注册成功！")
                     window.location.replace("/login")
                     document.getElementById("name").innerHTML = ""
                     document.getElementById("pwd").innerHTML = ""
                 }else{
                     alert("账号或者密码含有非法字符！")
                 }

             },
             error:function () {
                 alert("注册失败!")
             }
         })

    }

    // 注册成功
    // document.getElementById("but").onclick = function(){
    //     $.ajax({
    //         url: "/register",
    //         type:"post",
    //         data:{
    //             "email": document.getElementById("email").value,
    //             "name" : document.getElementById("name").value,
    //             "pwd" : document.getElementById("pwd").value,
    //         },
    //         dataType:"json",
    //         success:function (data) {
    //             if (data.data == "注册成功！"){
    //                 alert("注册成功！")
    //                 window.location.replace("/login")
    //                 document.getElementById("name").innerHTML = ""
    //                 document.getElementById("pwd").innerHTML = ""
    //             }else{
    //                 alert("账号或者密码含有非法字符！")
    //             }
    //
    //         },
    //         error:function () {
    //             alert("注册失败!")
    //         }
    //     })
    // }



</script>
</body>
</html>